<template>
  <div class="detail-wrap">
    <div class="detail-left">
        <img :src="dmIcon">
        <ul>
          <!-- <li v-for="item in dmList">{{item.name}}</li> -->
          <router-link v-for="(item,index) in dmList" :to="item.path" tag="li" active-class="active" :key="index">
            {{ item.name }}
          </router-link>
        </ul>
    </div>
    <div class="detail-right">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dmList:[
        {
          name: "动漫BD",
          path: "bd",
          active: false
        },
        {
          name: "♂手办",
          path: "model",
          active: false
        },
        {
          name: "音乐",
          path: "music",
          active: false
        },
        {
          name: "周边",
          path: "around",
          active: false
        },
      ],
      imgMap: {
        '/detail/bd': require('../assets/images/dog1.jpg'),
        '/detail/model': require('../assets/images/dog2.jpg'),
        '/detail/music': require('../assets/images/dog3.jpg'),
        '/detail/around': require('../assets/images/dog4.jpg'),
      }
    }
  },
  computed:{
    dmIcon () {
      return this.imgMap[this.$route.path]
    }
  }
}
</script>

<style>
.detail-wrap {
  overflow: hidden;
}

.detail-left{
  float: left;
  width: 200px;
  background-color: #fff;
  margin: 15px;
}

.detail-left img{
  width: 200px;
  height: 200px;
}

.detail-left li{
  padding: 8px;
  cursor: pointer;

}

.detail-left li.active,
.detail-left li:hover{
  background-color: #4fc08d;
  color: #fff;
}

.detail-right {
  float: left;
  width: 980px;
  margin: 15px 0 0 20px;
}

.detail-right-up{
  background-color: #fff;
  height: 300px;
}

.detail-right-down{
  background-color: #fff;
  margin-top: 50px;
}
</style>

